<template>
  <div class="send-business-card-card no-drag" @click.self="Tool.playWarningTone()">
    <el-card v-if="cardModel === 0" class="send-business-card-card-info">
      <div class="main">
        <div class="left">
          <div class="send-business-card-card-search">
            <div v-if="switchInputValueB === 0" class="search-inputA" @click.stop="switchInputB(1)">
              <span class="iconfont icon-search" style=""></span>&nbsp;搜索
            </div>
            <el-input
              v-if="switchInputValueB === 1"
              ref="refB"
              v-model="searchValue"
              placeholder=""
              style="height: 25px"
              @input="executeSearch"
            >
              <template #prefix>
                <span class="iconfont icon-search"></span>
              </template>
              <template #suffix>
                <el-button
                  key="primary"
                  type="text"
                  style="width: max-content"
                  @click.stop="switchInputB(0)"
                  >取消</el-button
                >
              </template>
            </el-input>
            <div class="create-new-chat" @click.stop="switchPage(1)">创建新的聊天</div>
          </div>
          <div class="recent-chat-checkbox">
            <div style="color: #000">{{ searchValue.length > 0 ? '联系人' : '最近聊天' }}</div>
            <div
              v-if="selectMode === 'radio'"
              style="color: #566a95; cursor: pointer"
              @click.stop="switchSelectMode('checkbox')"
            >
              多选
            </div>
            <div
              v-if="selectMode === 'checkbox'"
              style="color: #566a95; cursor: pointer"
              @click.stop="switchSelectMode('radio')"
            >
              取消多选
            </div>
          </div>
          <div v-if="searchValue.length === 0" class="selected-contact-list">
            <el-scrollbar v-if="selectMode === 'radio'" class="list">
              <div v-for="(item, index) in recentlyChattingList" :key="index">
                <div
                  class="chat-info"
                  :class="[singleChoiceResult.contactUserId === item.contactUserId ? 'active' : '']"
                  @click.stop="selectedItem(item, 'radio')"
                >
                  <div class="selected-circle">
                    <div v-if="singleChoiceResult.contactUserId === item.contactUserId" class="a">
                      <div class="b"></div>
                    </div>
                    <div v-else class="c"></div>
                  </div>
                  <el-avatar
                    :size="30"
                    :src="Tool.getAvatar(item.contactUserId, item.avatar, 500)"
                    shape="square"
                  />
                  <div class="part-name">
                    {{ determineNoteNameIsEmpty(item.noteName) ? item.nickName : item.noteName }}
                  </div>
                </div>
              </div>
            </el-scrollbar>
            <el-scrollbar v-if="selectMode === 'checkbox'" class="list">
              <div v-for="(item, index) in recentlyChattingList" :key="index">
                <div
                  class="chat-info"
                  :class="[singleChoiceResult.contactUserId === item.contactUserId ? 'active' : '']"
                  @click.stop="selectedItem(item, 'checkbox')"
                >
                  <div class="selected-circle">
                    <div v-if="selectedResult.indexOf(item) !== -1" class="a">
                      <div class="b"></div>
                    </div>
                    <div v-else class="c"></div>
                  </div>
                  <el-avatar
                    :size="30"
                    :src="Tool.getAvatar(item.contactUserId, item.avatar, 500)"
                    shape="square"
                  />
                  <div class="part-name">
                    {{ determineNoteNameIsEmpty(item.noteName) ? item.nickName : item.noteName }}
                  </div>
                </div>
              </div>
            </el-scrollbar>
          </div>
          <div v-if="searchValue.length > 0" class="selected-contact-list">会话聊天 群聊</div>
        </div>
        <div class="right">
          <div style="padding: 20px 0 0 20px; font-size: 14px; color: #000">
            {{ selectMode === 'radio' ? '发送给' : '分别发送给' }}
          </div>
          <div class="selected-result-list">
            <el-scrollbar
              class="listB"
              height="250"
              style="border-bottom: 1px solid #8c8c8c; margin: 0 20px 0 20px"
            >
              <div v-for="(item, index) in selectedResult" :key="index">
                <div class="selected-result-item">
                  <div class="chat-info-b">
                    <el-avatar
                      :size="30"
                      :src="Tool.getAvatar(item.contactUserId, item.avatar, 500)"
                      shape="square"
                    />
                    <div class="part-name">
                      {{ determineNoteNameIsEmpty(item.noteName) ? item.nickName : item.noteName }}
                    </div>
                  </div>
                  <div
                    class="delete-icon"
                    title="删除"
                    @click.stop="deleteSelectedResultItem(item, 0)"
                  >
                    <span class="iconfont icon-close"></span>
                  </div>
                </div>
              </div>
            </el-scrollbar>
          </div>
          <div style="padding: 10px 0 0 20px; font-size: 12px; color: #888">
            [名片]&nbsp;{{ selectedContact.nickName }}
          </div>
          <div style="padding: 10px 20px 0 20px; font-size: 12px; color: #888">
            <div
              v-if="switchInputValue === 0"
              class="give-to-friend-leave-message"
              @click.stop="switchInput(1)"
            >
              {{ giveToFriendLeaveMessage === '' ? '给朋友留言' : giveToFriendLeaveMessage }}
            </div>
            <el-input
              v-if="switchInputValue === 1"
              ref="refA"
              v-model="giveToFriendLeaveMessage"
              style="height: 30px"
            >
              <template #suffix>
                <el-button
                  key="primary"
                  type="text"
                  style="width: max-content"
                  @click.stop="switchInput(0)"
                  >取消</el-button
                >
              </template>
            </el-input>
          </div>
          <div style="display: flex; justify-content: center; margin-top: 15px">
            <el-button
              type="primary"
              :disabled="selectedResult.length === 0"
              @click.stop="sendSeparately"
            >
              {{
                selectMode === 'radio'
                  ? '发送'
                  : selectedResult.length === 0
                    ? '分别发送'
                    : `分别发送（${selectedResult.length}）`
              }}
            </el-button>
            <el-button class="cancel" type="primary" @click.stop="emit('close')">取消</el-button>
          </div>
        </div>
      </div>
    </el-card>
    <el-card v-if="cardModel === 1" class="send-business-card-card-info">
      <div class="main">
        <div class="left" style="background-color: white; border-right: 1px solid #ddd">
          <div class="send-business-card-card-search">
            <div v-if="switchInputValueC === 0" class="search-inputA" @click.stop="switchInputC(1)">
              <span class="iconfont icon-search" style=""></span>&nbsp;搜索
            </div>
            <el-input
              v-if="switchInputValueC === 1"
              ref="refC"
              v-model="searchValue"
              placeholder=""
              style="height: 25px"
              @input="executeSearchB"
            >
              <template #prefix>
                <span class="iconfont icon-search"></span>
              </template>
              <template #suffix>
                <el-button
                  key="primary"
                  type="text"
                  style="width: max-content"
                  @click.stop="switchInputC(0)"
                  >取消</el-button
                >
              </template>
            </el-input>
          </div>
          <el-scrollbar
            v-if="leftInfoTypeB === 0"
            ref="scrollbarRef"
            class="contact-info"
            height="370"
          >
            <!--        联系人-->
            <div v-for="(item, index) in contactList" :key="index" class="block">
              <div class="part-title">{{ item.title }}</div>
              <div v-for="(userInfo, index2) in item.value" :key="index2">
                <div
                  v-if="userInfo.friendsCode === 1"
                  :class="[
                    'content',
                    'contact-list',
                    singleChoiceResult.contactUserId === userInfo.contactUserId ? 'active' : ''
                  ]"
                  @click.stop="selectedItem(userInfo, 'checkbox')"
                >
                  <div class="part-icon">
                    <div class="selected-circle">
                      <div v-if="selectedResult.indexOf(userInfo) !== -1" class="a">
                        <div class="b"></div>
                      </div>
                      <div v-else class="c"></div>
                    </div>
                    <el-avatar
                      :size="40"
                      :src="Tool.getAvatar(userInfo.contactUserId, userInfo.avatar, 40)"
                      shape="square"
                    />
                    <div class="part-name">
                      {{
                        determineNoteNameIsEmpty(userInfo.noteName)
                          ? userInfo.nickName
                          : userInfo.noteName
                      }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-scrollbar>
          <!--          搜索结果-->
          <el-scrollbar v-if="leftInfoTypeB === 1" class="search-result">
            <!--        联系人-->
            <div v-if="searchResultContactList.length > 0" class="contact-person-info">
              <div style="padding-left: 10px; font-size: 15px; color: #7a7a7a">联系人</div>
              <div
                v-for="(user, index3) in searchResultContactList"
                :key="index3"
                class="user-info"
                @click.stop="selectedItem(user, 'checkbox')"
              >
                <div class="selected-circle">
                  <div v-if="selectedResult.indexOf(user) !== -1" class="a">
                    <div class="b"></div>
                  </div>
                  <div v-else class="c"></div>
                </div>
                <div class="avatar">
                  <el-avatar
                    :size="40"
                    :src="Tool.getAvatar(user.contactUserId, user.avatar, 40)"
                    shape="square"
                  />
                </div>
                <div>
                  <div class="nick-name">
                    <HighlightText :text="user.nickName" :search="searchValue" />
                  </div>
                  <div class="userSweetCircleId">
                    甜蜜账号:&nbsp;
                    <HighlightText :text="user.contactUserSweetCircleId" :search="searchValue" />
                  </div>
                </div>
              </div>
            </div>
            <!--        群聊-->
            <div v-if="searchResultGroupChatList.length > 0" class="contact-person-info">
              <div style="padding-left: 10px; font-size: 15px; color: #7a7a7a">群聊</div>
              <div
                v-for="(groupChat, index5) in searchResultGroupChatList"
                :key="index5"
                class="user-info"
              >
                <div class="avatar">
                  <el-avatar :size="40" :src="groupChat.avatar" shape="square" />
                </div>
                <div>
                  <div class="nick-name">
                    <HighlightText :text="groupChat.name" :search="searchValue" />
                  </div>
                  <div class="userSweetCircleId">
                    包含:&nbsp;
                    <HighlightText :text="groupChat.name" :search="searchValue" />
                  </div>
                </div>
              </div>
            </div>
          </el-scrollbar>
        </div>
        <div class="right">
          <div class="right-title">
            <div style="font-size: 14px">创建群聊并发送</div>
            <div style="color: #7a7a7a; font-size: 13px">
              {{ selectedResult.length > 0 ? `已选择${selectedResult.length}个联系人` : '' }}
            </div>
          </div>
          <div class="selected-result-list">
            <el-scrollbar
              height="250"
              weight="250"
              style="border-bottom: 1px solid #8c8c8c; margin: 0 20px 0 20px"
            >
              <el-row :gutter="0">
                <el-col
                  v-for="(item, index6) in selectedResult"
                  :key="index6"
                  :span="6"
                  style="margin-top: 10px"
                >
                  <div class="avatar">
                    <div class="a">
                      <div class="b">
                        <el-avatar
                          :size="40"
                          :src="Tool.getAvatar(item.contactUserId, item.avatar, 40)"
                          shape="square"
                        />
                        <div
                          class="part-name"
                          style="font-size: 13px; display: flex; justify-content: center"
                        >
                          <div>
                            <el-text style="width: 40px" truncated>
                              {{
                                determineNoteNameIsEmpty(item.noteName)
                                  ? item.nickName
                                  : item.noteName
                              }}
                            </el-text>
                          </div>
                        </div>
                      </div>
                      <div class="c" title="删除" @click.stop="deleteSelectedResultItem(item, 1)">
                        <span class="iconfont icon-close"></span>
                      </div>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </el-scrollbar>
          </div>

          <div style="padding: 10px 0 0 20px; font-size: 12px; color: #888">
            [名片]&nbsp;{{ selectedContact.nickName }}
          </div>
          <div style="padding: 10px 20px 0 20px; font-size: 12px; color: #888">
            <div
              v-if="switchInputValue === 0"
              class="give-to-friend-leave-message"
              @click.stop="switchInput(1)"
            >
              {{ giveToFriendLeaveMessage === '' ? '给朋友留言' : giveToFriendLeaveMessage }}
            </div>
            <el-input
              v-if="switchInputValue === 1"
              ref="refA"
              v-model="giveToFriendLeaveMessage"
              style="height: 30px"
            >
              <template #suffix>
                <el-button
                  key="primary"
                  type="text"
                  style="width: max-content"
                  @click.stop="switchInput(0)"
                  >取消</el-button
                >
              </template>
            </el-input>
          </div>
          <div style="display: flex; justify-content: center; margin-top: 15px">
            <el-button
              type="primary"
              :disabled="selectedResult.length === 0"
              @click.stop="createAndSend"
              >创建并发送</el-button
            >
            <el-button class="cancel" type="primary" @click.stop="switchPage(0)">返回</el-button>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>
<script setup>
import { computed, nextTick, ref } from 'vue'
import Tool from '#/utils/Tool'
import HighlightText from '#/components/HighlightText.vue'
import { useContactInfoStore } from '#/stores/ContactInfoStore'
// import { useUserInfoStore } from '#/stores/UserInfoStore'

// const userInfoStore = useUserInfoStore()
const contactInfoStore = useContactInfoStore() // 存储联系人信息  用户的所有联系人
const emit = defineEmits(['close']) // 父组件绑定的事件 关闭此组件 关闭卡片
const cardModel = ref(0) // 卡片模式 0发送给最近聊天 1 创建新群聊 或者 单聊（好友聊天 单人）
const searchValue = ref('') // 搜索框输入的值  用户 输入的搜索值
const giveToFriendLeaveMessage = ref('') // 给朋友 留言
const switchInputValue = ref(0) // 切换给朋友留言输入框的状态 是否为可编辑状态 0不可编辑 1可编辑
const switchInputValueB = ref(0) // 切换搜索聊天列表输入框的状态 是否为可编辑状态 0不可编辑 1可编辑
const switchInputValueC = ref(0) // 切换搜索联系人输入框的状态 是否为可编辑状态 0不可编辑 1可编辑

const refA = ref() // 给朋友留言输入框的引用
const refB = ref() // 搜索聊天列表输入框的引用
const refC = ref() // 搜索联系人输入框的引用
const selectedContact = computed(() => {
  // 右键选择的联系人的信息  将谁的信息发送给朋友
  return contactInfoStore.getContactInfoB()
})

const selectMode = ref('radio') // 选择模式 checkbox多选 radio单选
const singleChoiceResult = ref({}) // 当前选择的联系人
const selectedResult = ref([]) // 最终选择的结果  给谁发送名片 可以是一个也可以是多个

// 联系人列表 计算属性 从存储中获取
const contactList = computed(() => {
  return contactInfoStore.getContactInfoList()
})
const recentlyChattingList = computed(() => {
  // 最近聊天列表 所有的聊天消息
  //todo 更换所有的聊天消息
  return [
    {
      avatar: 'b9d9ee48e859f4d98dfe91b7a79882c.png',
      contactUserId: 'E69AD325F5D0357B7599690854A45A07',
      nickName: '测试05',
      noteName: ''
    },
    {
      avatar: 'ycc011.jpg',
      contactUserId: '30222AF9BD58669A7696237BC663A6C',
      nickName: '测试11',
      noteName: ''
    },
    {
      avatar: 'ycc011.jpg',
      contactUserId: 'BAD4CE02F73549088F957F5E8FA33E5A',
      nickName: '测试09',
      noteName: ''
    }
  ]
})

// const searchResultSessionChatListContactList = ref([]) // 搜索结果 会话聊天列表 联系人列表
// const searchResultSessionGroupChatListGroupChatList = ref([]) // 搜索结果 会话群聊列表 群聊列表

const searchResultContactList = ref([]) // 搜索结果 联系人列表
const searchResultGroupChatList = ref([]) // 搜索结果 群聊列表

const leftInfoTypeB = ref(0)

/**
 * 执行搜索   搜索聊天记录
 */
const executeSearch = () => {
  // todo 根据聊天列表的联系人 昵称 甜蜜账号 搜索
  // todo 根据群聊列表 所有包含消息 搜索
  if (searchValue.value.trim() === '') {
    searchResultContactList.value = []
    searchResultGroupChatList.value = []
    switchInputValueB.value = 0
    searchResultContactList.value = []
    searchResultGroupChatList.value = []
  }
}
/**
 * 执行搜索 搜索联系人
 */
const executeSearchB = () => {
  searchResultContactList.value = []
  searchResultGroupChatList.value = []
  // todo 根据联系人 昵称 甜蜜账号 搜索
  // todo 根据群聊 所有包含消息 搜索

  // 根据联系人 nickName userSweetCircleId
  contactList.value.forEach((item) => {
    item.value.forEach((item2) => {
      if (item2.contactUserSweetCircleId.indexOf(searchValue.value) !== -1) {
        let bool = true
        // 判断 是否已经存在 添加过了
        for (let i = 0; i < searchResultContactList.value.length; i++) {
          let val = searchResultContactList.value[i]
          if (val.contactUserSweetCircleId === item2.contactUserSweetCircleId) {
            bool = false
          }
        }
        if (bool) {
          searchResultContactList.value.push(item2)
        }
      }
      if (item2.nickName.indexOf(searchValue.value) !== -1) {
        let bool = true
        for (let i = 0; i < searchResultContactList.value.length; i++) {
          let val = searchResultContactList.value[i]
          if (val.nickName === item2.nickName) {
            bool = false
          }
        }
        if (bool) {
          searchResultContactList.value.push(item2)
        }
      }
    })
  })
  // todo 根据群聊 name groupId
  // todo 根据 聊天的 群聊名 联系人名 还有聊天中的内容 群聊的公告内容
}

/**
 * 切换给朋友留言输入框的状态
 * @param val
 */
const switchInput = (val) => {
  switchInputValue.value = val
  if (val === 1) {
    nextTick(() => {
      refA.value.focus()
    })
  }
}
/**
 * 切换搜索聊天列表输入框的状态
 * @param val
 */
const switchInputB = (val) => {
  switchInputValueB.value = val
  searchValue.value = ''
  if (val === 1) {
    nextTick(() => {
      refB.value.focus()
    })
  }
}
/**
 * 切换搜索联系人输入框的状态
 * @param val
 */
const switchInputC = (val) => {
  searchValue.value = ''
  switchInputValueC.value = val
  leftInfoTypeB.value = val
  searchResultContactList.value = []
  searchResultGroupChatList.value = []
  if (val === 1) {
    nextTick(() => {
      refC.value.focus()
    })
  }
}
/**
 * 切换选择模式  多选 还是单选
 * @param val
 */
const switchSelectMode = (val) => {
  searchValue.value = ''
  selectMode.value = val
  selectedResult.value = []
  singleChoiceResult.value = {}
}

const switchPage = (num) => {
  cardModel.value = num
  searchValue.value = ''
  selectedResult.value = []
  singleChoiceResult.value = {}
  switchInputC(0)
}

const determineNoteNameIsEmpty = (notName) => {
  if (notName === '' || notName === null || notName === undefined) {
    return true
  }
}

// /**
//  * 对符合搜索条件的值进行高亮
//  * 用于在字符串value中匹配searchValue.value的内容，
//  * 并将匹配到的内容用<span>标签包裹起来，设置为绿色高亮显示。
//  * 其中，使用了正则表达式reg来进行全局（gi）匹配。
//  * @param value
//  * @returns {*}
//  */
// const getValue = (value) => {
//   const reg = new RegExp(searchValue.value, 'gi')
//   return value.replace(reg, `<span style="color: #00c25b">${searchValue.value}</span>`)
// }

/**
 *
 * @param item  聊天消息 对象
 * @param model
 */
const selectedItem = (item, model) => {
  // todo 将item 聊天消息对象转换为 联系人对象

  if (model === 'radio') {
    singleChoiceResult.value = item
    selectedResult.value[0] = item
  } else if (model === 'checkbox') {
    singleChoiceResult.value = item
    if (selectedResult.value.indexOf(item) !== -1) {
      selectedResult.value.splice(selectedResult.value.indexOf(item), 1)
    } else {
      selectedResult.value.push(item)
    }
  }
}
const deleteSelectedResultItem = (item, type) => {
  if (type === 1) {
    // 创建新的聊天页面 删除选择的联系人
    selectedResult.value.splice(selectedResult.value.indexOf(item), 1)
  } else {
    // 最近聊天页面 删除选择的联系人
    if (selectMode.value === 'radio') {
      selectedResult.value.splice(0, 1)
      singleChoiceResult.value = {}
    } else if (selectMode.value === 'checkbox') {
      selectedResult.value.splice(selectedResult.value.indexOf(item), 1)
    }
  }
}

const sendSeparately = () => {
  console.log(selectedResult.value)
}

const createAndSend = () => {
  //todo 如果 selectedResult 的长度大于1 就先创建群聊 在发送消息  如果等于1 就直接发送消息
  console.log(selectedResult.value)
}
</script>
<style scoped lang="scss">
.send-business-card-card {
  user-select: none;
  width: 100%;
  height: 100%;
  float: left;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 15px;

  .send-business-card-card-info {
    width: 600px;
    height: 420px;

    .main {
      display: flex;
      flex-direction: row;

      .left {
        padding: 15px 0 0 15px;
        width: 300px;
        height: 420px;
        background: #f5f5f6;

        .send-business-card-card-search {
          padding: 0 15px 5px 0;
        }
      }

      .right {
        width: 300px;
        height: 420px;

        .right-title {
          display: flex;
          justify-content: space-between;
          padding: 15px 20px 0 20px;
        }
      }
    }
  }
}

.el-button {
  width: 100px;
}

.cancel {
  color: #07c160;
  border: none;
  background-color: #f1f1f2;

  &:hover {
    background-color: #e0e0e0;
  }
}

.give-to-friend-leave-message {
  cursor: text;
  padding: 2px;
  background-color: #f3f3f4;
  height: 30px;
  display: flex;
  align-items: center;
  border-radius: 2px;
}

.search-inputA {
  color: #8c8c8c;
  background-color: #e0e0e1;
  font-size: 12px;
  cursor: text;
  border-radius: 3px;
  height: 25px;
  display: flex;
  align-items: center;
  padding: 3px;
}

.create-new-chat {
  padding: 2px;
  color: #000;
  font-size: 13px;
  display: flex;
  justify-content: center;
  border: 1px solid #e0e0e1;
  margin-top: 5px;
  border-radius: 3px;
  cursor: pointer;
}

.recent-chat-checkbox {
  padding-right: 15px;
  margin-top: 5px;
  margin-bottom: 5px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  font-size: 14px;
}

.selected-contact-list {
  height: 320px;

  .list {
    .chat-info {
      height: 45px;
      display: flex;
      align-items: center;

      .selected-circle {
        width: 15px;
        height: 15px;
        border-radius: 15px;
        margin-right: 10px;

        .a {
          width: 15px;
          height: 15px;
          background-color: #07c160;
          border: 1px solid #07c160;
          border-radius: 15px;
          display: flex;
          align-items: center;
          justify-content: center;

          .b {
            width: 5px;
            height: 5px;
            border-radius: 5px;
            background-color: #fff;
          }
        }

        .c {
          width: 14px;
          height: 14px;
          border-radius: 14px;
          margin-right: 14px;
          border: 1px solid #8c8c8c;
        }
      }

      .el-avatar {
        margin-right: 10px;
      }

      .part-name {
        color: #000;
        font-size: 14px;
      }

      &:hover {
        background-color: #e5e5e5;
      }
    }
  }
}

.selected-result-item {
  display: flex;
  align-items: center;
  justify-content: space-between;

  .chat-info-b {
    height: 45px;
    display: flex;
    align-items: center;

    .el-avatar {
      margin-right: 10px;
    }
  }

  .delete-icon {
    cursor: pointer;
    width: 15px;
    height: 15px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #cacacb;
    .icon-close {
      font-size: 8px;
      color: #fff;
    }
    &:hover {
      background-color: #9a9a9a;
    }
  }
}

.block {
  background: #fff;

  .part-title {
    padding: 5px 0 0 5px;
    color: #888888;
    font-size: 13px;
  }

  .content {
    padding: 10px;

    &:hover {
      background: #dcdcdc;
    }
  }

  .active {
    background: #c6c5c5;

    &:hover {
      background-color: #c6c5c5;
    }
  }

  .part-icon {
    display: flex;
    align-items: center;

    .selected-circle {
      width: 15px;
      height: 15px;
      border-radius: 15px;
      margin-right: 10px;

      .a {
        width: 15px;
        height: 15px;
        background-color: #07c160;
        border: 1px solid #07c160;
        border-radius: 15px;
        display: flex;
        align-items: center;
        justify-content: center;

        .b {
          width: 5px;
          height: 5px;
          border-radius: 5px;
          background-color: #fff;
        }
      }

      .c {
        width: 14px;
        height: 14px;
        border-radius: 14px;
        margin-right: 14px;
        border: 1px solid #8c8c8c;
      }
    }

    .part-img {
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;

      span {
        color: #ffffff;
        font-size: 30px;
      }
    }
  }

  .part-name {
    color: #000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-left: 15px;
    user-select: none;
    font-size: 14px;
  }
}

.search-result {
  .contact-person-info {
    background: #fff;

    .user-info {
      display: flex;
      align-items: center;
      padding: 10px;

      .selected-circle {
        width: 15px;
        height: 15px;
        border-radius: 15px;
        margin-right: 10px;

        .a {
          width: 15px;
          height: 15px;
          background-color: #07c160;
          border: 1px solid #07c160;
          border-radius: 15px;
          display: flex;
          align-items: center;
          justify-content: center;

          .b {
            width: 5px;
            height: 5px;
            border-radius: 5px;
            background-color: #fff;
          }
        }

        .c {
          width: 14px;
          height: 14px;
          border-radius: 14px;
          margin-right: 14px;
          border: 1px solid #8c8c8c;
        }
      }

      .avatar {
        width: 40px;
      }

      .nick-name {
        user-select: none;
        margin-left: 10px;
        font-size: 15px;
      }

      .userSweetCircleId {
        user-select: none;
        margin-left: 10px;
        font-size: 12px;
      }

      &:hover {
        background-color: #e8e8e8;
      }
    }
  }

  .search-contacts-online {
    display: flex;
    align-items: center;
    padding: 10px;
    background: #ffffff;
    margin: 10px 0 10px 0;

    .icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      background: #07c160;
      margin-right: 5px;

      span {
        color: #ffffff;
        font-size: 30px;
      }
    }

    &:hover {
      background-color: #f1f1f1;
    }
  }
}

.selected-result-list {
  .a {
    display: flex;
    .c {
      position: relative;
      top: -8px;
      right: 8px;
      background-color: #cacaca;
      height: 15px;
      width: 15px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 100%;
      padding: 5px;
      cursor: pointer;
      .icon-close {
        font-size: 8px;
        color: #fff;
      }
      &:hover {
        background-color: #8c8c8c;
      }
    }
  }
}

.active {
  background-color: #d3d2d3;
}
</style>
